<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>账号管理</span>
        <span style="font-size: 12px; font-weight: 400; margin-left: 20px"
          >账号数：{{ pageData.total }}</span
        >
      </div>
    </template>
    <div class="right">
      <el-button
        class="height40"
        @click="authoritychange"
        v-hasPermi="['system:userDate:permission']"
        >权限设置</el-button
      >
      <el-button
        class="height40"
        @click="addUserChange"
        v-hasPermi="['system:userDate:add']"
        >创建账号</el-button
      >
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      class="margintop"
      v-loading="isLoading"
      :header-cell-style="{ 'border-bottom': 'none' }"
      :header-row-style="{ height: '60px' }"
      :cell-style="{ height: '60px', 'border-bottom': 'none' }"
    >
      <el-table-column prop="realName" label="姓名" />
      <el-table-column prop="roleName" label="角色名" />
      <el-table-column prop="mobile" label="手机" width="200" />
      <el-table-column prop="type" label="账号状态">
        <template #default="scope">
          <span :style="scope.row.isUse == 1 ? '' : 'color: #A8ABB2;'">{{
            scope.row.isUse === 1 ? '已启用' : '未启用'
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="绑定PC">
        <template #default="scope">
          <el-button
            :type="scope.row.isWeChatPC === 1 ? 'primary' : ''"
            link
            :disabled="scope.row.isWeChatPC !== 1"
            @click="unbindchange(scope.row, 1, '')"
          >
            {{ scope.row.isWeChatPC === 1 ? '解绑' : '未绑定' }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="绑定H5">
        <template #default="scope">
          <el-button
            :type="scope.row.isWeChat === 1 ? 'primary' : ''"
            link
            :disabled="scope.row.isWeChat !== 1"
            @click="unbindchange(scope.row, 2, '')"
          >
            {{ scope.row.isWeChat === 1 ? '解绑' : '未绑定' }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column prop="turnover" label="营业额客单数" />
      <!--      <el-table-column prop="roleName" label="用户角色"/>-->
      <el-table-column prop="lastLoginTime" label="上次登录" width="160" />
      <!-- <el-table-column label="下级客单查看" width="160">
        <template #default="scope">
          <el-tooltip
            v-if="scope.row.roleId != 2"
            class="box-item"
            effect="dark"
            content="开启/关闭"
            placement="top"
          >
            <el-switch
              v-model="scope.row.is_parent"
              :active-value="1"
              :inactive-value="0"
              v-hasPermi="['system:userDate:enable']"
              style="margin: 0 20px"
              @change="switchChange(scope.row, 'is_parent')"
            />
          </el-tooltip>
        </template>
      </el-table-column> -->
      <el-table-column fixed="right" label="操作" width="150" align="center">
        <template #default="scope">
          <div class="alitem">
            <el-tooltip
              class="box-item"
              effect="dark"
              content="编辑"
              placement="top"
            >
              <el-icon
                size="20"
                style="cursor: pointer"
                @click="editchange(scope.row)"
                v-hasPermi="['system:userDate:edit']"
              >
                <EditPen />
              </el-icon>
            </el-tooltip>

            <el-tooltip
              class="box-item"
              effect="dark"
              content="启用/停用"
              placement="top"
            >
              <el-switch
                v-model="scope.row.isUse"
                :active-value="1"
                :inactive-value="0"
                v-hasPermi="['system:userDate:enable']"
                style="margin: 0 20px"
                @change="switchChange(scope.row, 'isUse')"
              />
            </el-tooltip>

            <el-tooltip
              class="box-item"
              effect="dark"
              content="删除"
              placement="top"
            >
              <el-icon
                size="20"
                style="cursor: pointer"
                @click="delChange(scope.row)"
                v-hasPermi="['system:userDate:delete']"
              >
                <Delete />
              </el-icon>
            </el-tooltip>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="right" style="margin-top: 20px">
      <el-config-provider :locale="zhCn">
        <el-pagination
          v-model:current-page="pageData.page"
          v-model:page-size="pageData.pageSize"
          :page-sizes="[10, 20, 30]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageData.total"
          @size-change="accountLists"
          @current-change="accountLists"
        />
      </el-config-provider>
    </div>
  </el-card>
  <account ref="userAccount" @accountLists="accountLists"></account>
</template>
<script setup>
import { ref } from 'vue';
import account from './module/account.vue';
import {
  accountList,
  accountDel,
  accountCreate,
} from '@/api/system/account.js';
import { useRouter } from 'vue-router';
import zhCn from 'element-plus/es/locale/lang/zh-cn';

const router = useRouter();
const userAccount = ref(null);
const tableData = ref([]);

const pageData = ref({
  page: 1,
  pageSize: 10,
  total: 0,
});
const isLoading = ref(false);

const { proxy } = getCurrentInstance();

// 停用/启用
function switchChange(val, type) {
  if (type == 'isUse') {
    let isUseStatus = null;
    if (val.isUse === 1) {
      isUseStatus = 1;
    } else {
      isUseStatus = 0;
    }
    console.log(1111111);

    unbindchange(val, 3, isUseStatus);
  } else if (type == 'is_parent') {
    let is_parentStatus = null;
    if (val.is_parent === 1) {
      is_parentStatus = 1;
    } else {
      is_parentStatus = 0;
    }
    unbindchange(val, 4, is_parentStatus);
    console.log(33333333);
  }
}

function unbindchange(val, idx, status) {
  console.log(22222222);

  let data = {};
  if (idx === 1) {
    data = {
      id: val.id,
      isWeChatPC: 0,
    }; // 解绑pc
  } else if (idx === 2) {
    data = {
      id: val.id,
      isWeChat: 0,
    }; // 解绑h5
  } else if (idx === 4) {
    data = {
      id: val.id,
      is_parent: status,
    }; // 是否下级客单查看
  } else {
    data = {
      id: val.id,
      isUse: status,
    }; // 停用/启用
  }
  accountCreate(data).then((res) => {
    if (res.code === 20000) {
      proxy.$modal.msgSuccess('操作成功');
    }
  });
}

function editchange(val) {
  userAccount.value.openchange({
    ...val,
  });
}

function delChange(val) {
  proxy.$modal
    .confirm('是否需要删除当前账号信息')
    .then(function () {
      return accountDel({
        id: val.id,
      });
    })
    .then((res) => {
      if (res.code === 20000) {
        proxy.$modal.msgSuccess('删除成功');
        accountLists();
      }
    })
    .catch(() => {
      proxy.$modal.msg('取消删除');
    });
}

accountLists();

function accountLists() {
  isLoading.value = true;
  accountList(pageData.value)
    .then((res) => {
      isLoading.value = false;
      tableData.value = res.data.data;
      pageData.value.total = res.data.total;
    })
    .catch(() => {
      isLoading.value = false;
    });
}

function authoritychange() {
  router.push('/system/authority');
}

function addUserChange() {
  userAccount.value.openchange();
}
</script>
<style lang="scss" scoped>
::v-deep(.el-form--inline .el-form-item) {
  margin-right: 7px;
}

::v-deep(.el-form-item--default) {
  margin-bottom: 4px;
}

.box-card {
  margin: 20px;

  .card-header {
    font-size: 20px;
    font-weight: 600;
    color: #1d2129;
    padding: 10px;
  }
}
</style>
